<template>
    <view :style="{ '--color': color }">
        <navBar title="我的卡包" bgColor="transparent" :transparent="false"></navBar>
        <view class="Content" :style="paddingTop">
            <view
                class="Wrapper"
                @click="tabCurrent(index)"
                v-for="(item, index) in list"
                :key="index"
                :class="{
                    division: item.current,
                    isEnable: !isEnable && index > current,
                    Arrow: index == current + 1 && !isEnable && index > current
                }">
                <view class="row j-centert p-bot40" v-if="index == current + 1 && !isEnable">
                    <view class="iconfont icon-Upxiangshang29 color_99 size46"></view>
                </view>
                <view class="imgBox">
                    <image :src="$imgUrls(item.img)" mode="aspectFill" class="CardImg"></image>
                    <view class="imgBox_content">
                        <view class="CredTop">
                            <image :src="$imgUrls(item.log)" mode="aspectFill" class="Logo"></image>
                            <view class="d-flex flex-1 f-column j-sa">
                                <text class="ellipsis white size32 bold">{{ item.title }}</text>
                                <text class="Time white size26">{{ item.Date }}</text>
                            </view>
                        </view>
                        <view class="numBox" v-if="item.current">
                            <text class="Tips">剩余</text>
                            <text class="Tips_num">{{ item.num }}</text>
                            <text class="Tips">次</text>
                        </view>
                    </view>
                </view>

                <view class="intro" v-if="item.current">
                    <image :src="$imgUrls(item.log)" mode="aspectFill" class="Logo"></image>
                    <view class="intro_box">
                        <text class="ellipsis black size32 bold">{{ item.title }}</text>
                        <text class="ellipsis color_99 h6 m-top8">{{ item.info }}</text>
                        <text class="ellipsis color_cc h6 m-top8">{{ item.Date }}</text>
                    </view>
                    <view class="actuality">
                        <view class="Use">使用</view>
                        <view class="lineBox">
                            <u-line-progress
                                :percentage="item.percentage"
                                :showText="false"
                                :height="4"
                                activeColor="#ff0000"></u-line-progress>
                        </view>
                        <text class="residue">剩余 {{ item.num }} 次</text>
                    </view>
                </view>
            </view>

            <view class="Footer flex-1" v-if="showFot">
                <view class="d-flex a-center" @click.stop="toUrl(`lose`)">
                    <text class="h6 size26 color_66">已失效的</text>
                    <view class="iconfont icon-a-zujian32 color_66 h7"></view>
                </view>
                <view class="switchover" @click="toUrl(`exchange`)">
                    <view class="iconfont icon-qiehuan size40 white bold"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        data() {
            return {
                headImg: 'https://msraimgcdn.mogoie.com/6099/1691810360037.jpg',
                list: [
                    {
                        img: 'http://sraimgcdn2.mogoie.com//Uploads/img2019/7499/6099/20240365f3bfe384740.jpg',
                        log: 'https://msraimgcdn.mogoie.com/6099/content/20231027/1698385151758.jpg',
                        title: '卡片名称卡片名1111',
                        info: '这儿是卡片的摘要说',
                        Date: '2025年9月10日到期',
                        num: 6,
                        percentage: 20,
                        show: false,
                        shorten: false,
                        current: false
                    },
                    {
                        img: 'https://msraimgcdn.mogoie.com/6099/content/20231027/1698385151758.jpg',
                        log: 'https://msraimgcdn.mogoie.com/6099/1696929502708.jpg',
                        title: '卡片名称卡片名2222',
                        info: '这儿是卡片的摘要说',
                        Date: '2025年05月15日到期',
                        num: 5,
                        percentage: 60,
                        show: false,
                        shorten: true,
                        current: false
                    },
                    {
                        img: 'https://msraimgcdn.mogoie.com/6099/1696929502708.jpg',
                        log: 'https://msraimgcdn.mogoie.com/6099/1709797684310.JPG',
                        title: '卡片名称卡片名3333',
                        info: '这儿是卡片的摘要说',
                        Date: '2025年10月21日到期',
                        num: 8,
                        percentage: 85,
                        show: false,
                        shorten: true,
                        current: false
                    },
                    {
                        img: 'https://msraimgcdn.mogoie.com/6099/1709797684310.JPG',
                        log: 'https://msraimgcdn.mogoie.com/6099/1693813515733.jpg',
                        title: '卡片名称卡片名4444',
                        info: '这儿是卡片的摘要说',
                        Date: '2025年10月21日到期',
                        num: 3,
                        percentage: 29,
                        show: false,
                        shorten: true,
                        current: false
                    }
                ],
                current: 0
            }
        },
        methods: {
            tabCurrent(index) {
                this.list.forEach((item) => {
                    item.current = false
                })
                this.list[index].current = true
                this.current = index
            }
        },

        computed: {
            ...mapState(['color', 'totalHeight']),
            paddingTop() {
                return `padding-top:${this.totalHeight + 10}px`
            },
            isEnable() {
                let Flag = this.list.every((item) => !item.current)
                return Flag
            },
            showFot() {
                if (this.isEnable || this.current + 1 == this.list.length) {
                    return true
                } else {
                    return false
                }
            }
        }
    }
</script>

<style>
    page {
        background-color: #f2f2f2;
    }
</style>
<style lang="scss" scoped>
    .Content {
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        padding-left: 30rpx;
        padding-right: 30rpx;
        display: flex;
        flex-direction: column;
    }

    .division {
        flex: 1;
    }
    .Arrow {
        height: 250rpx !important;
    }
    .icon-Upxiangshang29 {
        animation-name: fadeInOut;
        animation-duration: 2s; /* 动画持续时间 */
        animation-iteration-count: infinite; /* 动画无限循环 */
    }
    @keyframes fadeInOut {
        0%,
        100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }
    .isEnable {
        height: 160rpx;
        margin-top: -80rpx !important;
        overflow: hidden;
        .Time {
            opacity: 0;
        }
    }
    .Wrapper:first-child {
        margin-top: 0;
    }
    .Wrapper {
        width: 100%;
        margin-top: -200rpx;
        transition: flex 0.5s ease;
        .imgBox {
            width: 100%;
            height: 350rpx;
            position: relative;
            overflow: hidden;
            border-radius: 10rpx;

            .CardImg {
                width: 100%;
                height: 100%;
                border-radius: 10rpx;
            }
            .imgBox_content {
                position: absolute;
                inset: 0;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                padding: 20rpx;
                .CredTop {
                    width: 100%;
                    display: flex;
                }
                .numBox {
                    padding: 2rpx 14rpx;
                    background-color: rgba(0, 0, 0, 0.5);
                    color: #ffffff;
                    border-radius: 10rpx;
                    .Tips {
                        font-size: 24rpx;
                    }
                    .Tips_num {
                        font-size: 30rpx;
                        margin: 0 4rpx;
                    }
                }
            }
        }

        .intro {
            width: 100%;
            background-color: #ffffff;
            border-radius: 10rpx;
            margin-top: 20rpx;
            display: flex;
            align-items: center;

            overflow: hidden;
            padding: 24rpx;

            &_box {
                flex: 1;
                display: flex;
                flex-direction: column;
            }
            .actuality {
                display: flex;
                flex-direction: column;
                align-items: center;
                .Use {
                    width: 160rpx;
                    height: 60rpx;
                    border-radius: 10rpx;
                    background-color: var(--color);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #ffffff;
                    font-size: 26rpx;
                }
                .lineBox {
                    width: 170rpx;
                    margin-top: 10rpx;
                }
                .residue {
                    margin-top: 10rpx;
                    color: #999;
                }
            }
        }
        .Logo {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }
    }
    .Footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding-top: 40rpx;
        padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
        .switchover {
            width: 70rpx;
            height: 70rpx;
            background-color: var(--color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>
